<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器-->
<div id="app">
    <!--从父模块(Vue对象)中获取数据-->
    <div>
        {{fuMsg1}} ----------------------- {{fuMsg2}}
    </div>
    <hr>
    <!--从子组件(vmComponent)中获取数据-->
    <!-- :msg="fuMsg1" 将父模块中的fuMsg1属性值赋值给子组件中自定义属性：msg-->
    <vm-component :msg="fuMsg2"></vm-component>
</div>

<!--1. 定义一个组件模板：子组件模板-->
<template id="temp">
    <div>
        {{compMsg}}  -------------------------{{msg}}
    </div>
</template>

<script>
    // 2. 定义一个子组件对象
    let vmComponent = {
        template:"#temp",
        data(){
            return {
                compMsg : '我是子组件中数据',
            }
        },
       props:{
        msg: {
            type:String,
            default:"默认值",
        }
       },
        methods:{

        }
    }
    // 3. 将子组件对象注册
    Vue.component("vm-component",vmComponent);

    //  定义一个Vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            fuMsg1:'我是父模块中数据1',
            fuMsg2:'我是父模块中数据2',
        }
    });
</script>
</body>
</html>